import { mapState, mapGetters } from 'vuex'
import Footer from '@/components/footer/footer.vue'
export default {
    components: {
        Footer
    },
    data() {
        return {
            servicePolicy: ['30天无忧退货', '48小时快速退款', '满88元免邮费'],
            totalPrice: 0, // 商品总价格
            isSelectedAll: true, // 是否全选
            selectedNum: this.$store.getters.cartGoodsNumber, // 选中个数
            isShowEditor: false, // 是否显示编辑面板
            editCheckedGoods: {} // 编辑状态选中的商品
        }
    },
    // 过滤
    filters: {
        // 格式化价格
        priceFomat(price) {
            return '￥' + price.toFixed(2)
        }
    },
    created() {
        this.getAllGoodsPrice()
    },
    computed: {
        ...mapState(['cartGoods', 'token', 'username']),
        ...mapGetters(['cartGoodsNumber'])
    },
    methods: {
        // 商品数量加减
        countGoodsNumber(goods, flag) {
            if (flag) {
                goods.num++
            } else {
                if (goods.num <= 1) {
                    this.$notify({ type: 'success', message: '本商品1件起售', duration: 1000 });
                    goods.num = 1
                    return
                }
                goods.num--
            }
            this.$store.dispatch('updateCart', this.cartGoods)
            this.getSelectedNumber()
            this.getAllGoodsPrice()
        },
        // 单个商品是否选中
        toggleChecked(goods, index) {
            if (!this.isShowEditor) {
                if (typeof goods.checked === 'undefined') {
                    this.$set(goods, 'checked', true)
                } else {
                    goods.checked = !goods.checked
                }
            } else {
                this.editCheckedGoods[index] = !this.editCheckedGoods[index]
                this.editCheckedGoods = { ...this.editCheckedGoods }
            }
            this.hasSelectedAll()
            this.getSelectedNumber()
            this.getAllGoodsPrice()
        },
        // 计算已选中个数
        getSelectedNumber() {
            let selectedNum = 0
            if (!this.isShowEditor) {
                Object.values(this.cartGoods).forEach((value) => {
                    if (value.checked) {
                        selectedNum += value.num
                    }
                })
            } else {
                Object.values(this.editCheckedGoods).forEach((value) => {
                    if (value) {
                        selectedNum += 1
                    }
                })
            }
            this.selectedNum = selectedNum
        },
        // 计算所有商品价格
        getAllGoodsPrice() {
            let totalPrice = 0
            Object.values(this.cartGoods).forEach((value) => {
                if (value.checked) {
                    totalPrice += value.price * value.num
                }
            })
            this.totalPrice = totalPrice
        },
        // 全选
        selectedAll(flag) {
            this.isSelectedAll = !flag
            if (!this.isShowEditor) {
                Object.values(this.cartGoods).forEach((value) => {
                    if (typeof value.checked === 'undefined') {
                        this.$set(value, 'checked', !flag)
                    } else {
                        value.checked = !flag
                    }
                })
            } else {
                for (let i in this.editCheckedGoods) {
                    this.editCheckedGoods[i] = !flag
                }
            }
            this.getSelectedNumber()
            this.getAllGoodsPrice()
        },
        // 判断是否全选
        hasSelectedAll() {
            let flag = true
            if (!this.isShowEditor) {
                Object.values(this.cartGoods).forEach((value) => {
                    if (!value.checked) {
                        flag = false
                    }
                })
            } else {
                if (Object.values(this.editCheckedGoods).length === Object.values(this.cartGoods).length) {
                    Object.values(this.editCheckedGoods).forEach((value) => {
                        flag = flag && value
                    })
                } else {
                    flag = false
                }
            }
            this.isSelectedAll = flag
        },
        // 编辑商品
        editorGoods(event) {
            this.isShowEditor = !this.isShowEditor
            if (this.isShowEditor) {
                event.target.innerText = '完成'
                for (let i in this.cartGoods) {
                    this.editCheckedGoods[i] = false
                }
            } else {
                event.target.innerText = '编辑'
            }
            this.hasSelectedAll()
            this.getSelectedNumber()
        },
        // 删除商品
        deleteGoods() {
            for (let i in this.editCheckedGoods) {
                if (this.editCheckedGoods[i]) {
                    delete this.editCheckedGoods[i]
                    delete this.cartGoods[i]
                }
            }
            this.editCheckedGoods = { ...this.editCheckedGoods }
            this.$store.dispatch('updateCart', this.cartGoods)
            this.hasSelectedAll()
            this.getSelectedNumber()
            this.getAllGoodsPrice()
        }
    }
}